<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
  	<li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">
//自定义获取元素方法
function $(id){
  return document.getElementById(id)
}
//转换中文
function transChina(val){
  let text = ['一','二','三','四','五','六','七','八','九','十'];
  if(val<11){
    return text[val]
  }
  return '超过十名了，没有名次'

}
var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */
 //数组排序  
  aqiData.sort(function(a,b){
    return b[1] - a[1]
  })

  let child = '';
  for(let i =0;i<aqiData.length;i++){
     if(aqiData[i][1]>60){
        child += `<li>第${transChina(i)}名:${aqiData[i][0]}，${aqiData[i][1]}</li>`
     }
   $('aqi-list').innerHTML = child;
  }

})();

</script>
</body>
</html>